<template>
  <div class="layout">
    <div class="main-box">
      <div class="tit">合金牌号记录</div>

      <div class="searcher-box">
        <div class="inp">
          <div class="inpH">合金牌号</div>
          <el-autocomplete
            :style="{ width: '250px' }"
            v-model="modelName"
            :fetch-suggestions="querySearch"
            placeholder="请输入合金牌号"
            @select="handleSelect"
          >
            <template #default="{ item }">
              {{ item.modelName }}
            </template>
          </el-autocomplete>
        </div>
        <el-button
          type="primary"
          icon="search"
          style="width: 80px"
          @click="handleSearch"
        >
          查询
        </el-button>
        <el-button
          type="primary"
          icon="refresh"
          style="width: 80px"
          @click="reset"
        >
          重置
        </el-button>
      </div>

      <div class="btn-list">
        <div class="left-btns">
          <el-button
            type="primary"
            v-if="search == true"
            class="ret"
            @click="handleReturn"
            icon="House"
            >返回</el-button
          >
          <el-button
            v-else
            type="primary"
            icon="plus"
            style="width: 100px; margin-right: 6px"
            @click="handleAdd"
          >
            添加
          </el-button>
          <el-button icon="delete" @click="handleDelete" type="danger">
            删除
          </el-button>
          <el-button icon="refresh" @click="handleRefresh" type="success">
            刷新
          </el-button>
        </div>
      </div>

      <div class="table-box">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          height="540"
          @selection-change="handleSelectionChange"
          :default-sort="{ prop: 'createdAt', order: 'descending' }"
          class="custom-table"
        >
          <el-table-column fixed type="selection" width="40" />
          <el-table-column label="合金牌号" width="150">
            <template #default="scope">
              <el-link type="text" @click="handleConcrete1(scope?.row)">{{
                scope?.row.modelName
              }}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="internalModel" label="内部牌号" width="150">
          </el-table-column>
          <el-table-column prop="rawMaterials" label="原材料列表" width="350">
            <template #default="scope">
              <span>
                <template
                  v-for="(value, name, index) in scope?.row.rawMaterials"
                >
                  <span v-if="index < 5" :key="name">
                    {{ name }}:{{ value }}{{ " " }}
                  </span>
                </template>
                <span
                  v-if="Object.keys(scope?.row.rawMaterials || {}).length > 5"
                  >......</span
                >
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createdAt"
            label="创建时间"
            width="180"
            sortable
          >
          </el-table-column>
          <el-table-column
            prop="updatedAt"
            label="更新时间"
            width="180"
            sortable
          >
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template #default="scope">
              <el-button
                type="primary"
                plain
                size="small"
                @click="handleEdit(scope?.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination-box" v-if="search == false">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          v-model:current-page="pageNum"
          :page-sizes="[30]"
          v-model:page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>

      <el-dialog
        title="创建新的合金型号"
        v-model="dialogFormVisible"
        width="460px"
        :before-close="reset1"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        draggable
      >
        <div class="form-box">
          <div class="col">
            <div class="ys">
              <div class="wz">合金牌号</div>
              <el-input
                class="sr"
                placeholder="请输入合金牌号"
                v-model="form.modelName"
                clearable
              >
              </el-input>
            </div>
          </div>
          <div class="col">
            <div class="ys">
              <div class="wz">内部牌号(选填)</div>
              <el-input
                class="sr"
                placeholder="请输入内部牌号"
                v-model="form.internalModel"
                clearable
              >
              </el-input>
            </div>
          </div>
          <div class="col col1">
            <div class="ys ys1">
              <div class="wz wz1">合金描述(选填)</div>
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
                placeholder="请输入合金的描述"
                v-model="form.description"
                class="sr sr1"
              >
              </el-input>
            </div>
          </div>
          <div class="col">
            <div class="ys">
              <div class="wz">原材料列表</div>
              <div class="sr">
                <el-input
                  class="ylm"
                  v-model="input.name"
                  placeholder="原料名"
                ></el-input>
                <el-input
                  class="ylm"
                  v-model="input.ratio"
                  placeholder="占比(0.X..)"
                ></el-input>
                <div class="ad" @click="push">+</div>
              </div>
            </div>
          </div>
          <div class="ylb">
            <div
              class="ylb1"
              v-for="(value, name) in form.rawMaterials"
              :key="name"
            >
              {{ name }}:{{ value }}
              <div class="pop" @click="pop(name)">-</div>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitA">确 定</el-button>
          <el-button @click="reset1">取 消</el-button>
        </div>
      </el-dialog>

      <el-dialog
        title="更新已有合金型号"
        v-model="dialogFormVisible1"
        width="460px"
        :before-close="reset2"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        draggable
      >
        <div class="form-box">
          <div class="col">
            <div class="ys">
              <div class="wz">合金牌号</div>
              <el-input
                class="sr"
                placeholder="合金牌号"
                v-model="edit1.modelName"
              >
              </el-input>
            </div>
          </div>
          <div class="col">
            <div class="ys">
              <div class="wz">内部牌号(选填)</div>
              <el-input
                class="sr"
                placeholder="内部牌号"
                v-model="edit1.internalModel"
              >
              </el-input>
            </div>
          </div>
          <div class="col col1">
            <div class="ys ys1">
              <div class="wz wz1">合金描述(选填)</div>
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
                placeholder="请输入合金的描述"
                v-model="edit1.description"
                class="sr sr1"
              >
              </el-input>
            </div>
          </div>
          <div class="col">
            <div class="ys">
              <div class="wz">原材料列表</div>
              <div class="sr">
                <el-input
                  class="ylm"
                  v-model="input.name"
                  placeholder="原料名"
                ></el-input>
                <el-input
                  class="ylm"
                  v-model="input.ratio"
                  placeholder="占比(0.X..)"
                ></el-input>
                <div class="ad" @click="push1">+</div>
              </div>
            </div>
          </div>
          <div class="ylb">
            <div
              class="ylb1"
              v-for="(value, name) in edit1.rawMaterials"
              :key="name"
            >
              {{ name }}:{{ value }}
              <div class="pop" @click="pop1(name)">-</div>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitB">确 定</el-button>
          <el-button @click="reset2">取 消</el-button>
        </div>
      </el-dialog>

      <el-dialog
        title="描述"
        v-model="dialogFormVisible3"
        width="20%"
        draggable
      >
        {{ des }}
      </el-dialog>

      <div class="load" v-if="loading">
        <el-icon class="is-loading">
          <Loading />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  onBeforeMount,
  reactive,
  toRefs,
  onMounted,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute } from "vue-router";
import request from "@/utils/request";
import axios from "axios";
import Decimal from "decimal.js";
export default defineComponent({
  setup() {
    const state = reactive({
      operatorName: "",
      operatorId: 1,
      loading: false,
      search: false,
      modelName: "", //搜索用牌号
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false, //弃用
      dialogFormVisible3: false,
      dialogFormVisible4: false, //弃用
      selectedRows: [],
      formLabelWidth: "200px",
      pageNum: 1, //当前页号
      pageSize: 30,
      total: 20,
      raw: {}, //弃用
      des: "",
      tableData: [],
      form: {
        //添加用表
        productName: "",
        unitPrice: 0,
        modelName: "",
        internalModel: "",
        description: "",
        rawMaterials: {},
        specifications: {},
      },
      edit: {}, //编辑用表
      edit1: {}, //保存修改前的副本
      input: {
        name: "",
        ratio: "",
        balance: 1.0,
      },
      input1: {
        name: "",
        ratio: "",
      },
      restaurants: [],
      options: [
        {
          value: "C",
          label: "颜色(C)",
        },
        {
          value: "D",
          label: "外径(D)",
        },
        {
          value: "d",
          label: "内径(d)",
        },
        {
          value: "L",
          label: "长(L)",
        },
        {
          value: "T1",
          label: "测试(T1)",
        },
        {
          value: "T",
          label: "厚(T)",
        },
        {
          value: "W",
          label: "宽(W)",
        },
      ],
    });
    const querySearch = (queryString, cb) => {
      const results = queryString
        ? createFilter(queryString, state.restaurants)
        : state.restaurants;

      cb(results);
    };
    const createFilter = (queryString, restaurants) => {
      return restaurants.filter((item) =>
        item.modelName.toLowerCase().includes(queryString.toLowerCase())
      );
    };
    const handleSelect = (item) => {
      state.modelName = item.modelName;
    };
    const handleSearch = async () => {
      if (state.modelName === "")
        ElMessage({
          showClose: true,
          message: "搜索的合金牌号不能为空",
          type: "warning",
        });
      else {
        state.loading = true;
        try {
          const response = await request({
            method: "post",
            url: "/product/alloy/models/name",
            data: {
              modelName: state.modelName,
            },
            headers: {
              "Content-Type": "application/json",
            },
          });
          if (response.data.success) {
            if (!state.search)
              ElMessage({
                showClose: true,
                message: "查询完成",
                type: "success",
              });
            state.search = true;
            state.tableData = response.data.data;
            for (let i = 0; i < state.tableData.length; i++) {
              state.tableData[i].updatedAt = state.tableData[i].updatedAt
                .split("T")
                .join(" ");
              state.tableData[i].createdAt = state.tableData[i].createdAt
                .split("T")
                .join(" ");
            }
            state.loading = false;
          } else {
            ElMessage({
              showClose: true,
              message: response.data.errorMsg,
              type: "error",
            });
          }
        } catch (error) {
          console.error("请求失败:", error);
        }
      }
    };
    const reset = () => {
      state.modelName = "";
    };
    const reset1 = () => {
      state.dialogFormVisible = false;
      state.form.productName = "";
      state.form.unitPrice = "";
      state.form.modelName = "";
      state.form.internalModel = "";
      state.form.description = "";
      state.form.specifications = {};
      state.form.rawMaterials = {};
      state.input.name = "";
      state.input.ratio = "";
    };
    const reset2 = () => {
      state.edit1 = {};
      state.input.name = "";
      state.input.ratio = "";
      state.input.balance = 0.0;
      state.dialogFormVisible1 = false;
    };
    const pj = (obj) => {
      const result = Object.entries(obj)
        .map(([key, value]) => `${key}${value}`)
        .join("*");
      return result;
    };
    const submitA = async () => {
      if (
        state.form.modelName === "" ||
        Object.keys(state.form.rawMaterials).length === 0
      )
        valid(state.form);
      else {
        try {
          const response = await request({
            url: `product/alloy/models`,
            method: "post",
            data: {
              modelName: state.form.modelName,
              internalModel: state.form.internalModel,
              description: state.form.description,
              specification: {},
              rawMaterials: state.form.rawMaterials,
            },
          });
          if (response.data.success) {
            ElMessage({
              showClose: true,
              message: "添加成功",
              type: "success",
            });
            reset1();
            handleRefresh();
          } else {
            ElMessage({
              showClose: true,
              message: response.data.errorMsg,
              type: "error",
            });
          }
        } catch (error) {
          console.error("请求失败:", error);
        }
      }
    };
    const submitB = async () => {
      if (
        state.edit1.modelName === "" ||
        Object.keys(state.edit1.rawMaterials).length === 0
      )
        valid(state.edit1);
      else {
        try {
          const response = await request({
            method: "put",
            url: "/product/alloy/models",
            data: {
              id: state.edit1.id,
              modelName: state.edit1.modelName,
              internalModel: state.edit1.internalModel,
              rawMaterials: state.edit1.rawMaterials,
              description: state.edit1.description,
            },
            headers: {
              "Content-Type": "application/json",
            },
          });
          if (response.data.success) {
            reset2();
            handleRefresh();
            ElMessage({
              showClose: true,
              message: "编辑成功",
              type: "success",
            });
            state.dialogFormVisible1 = false;
          } else {
            ElMessage({
              showClose: true,
              message: response.data.errorMsg,
              type: "error",
            });
          }
        } catch (error) {
          console.error("请求失败:", error);
        }
      }
    };
    const handleAdd = () => {
      state.input.balance = 1.0;
      state.dialogFormVisible = true;
    };
    const getR = async () => {
      try {
        const response = await request({
          method: "get",
          url: "/product/alloy/models/all",
          headers: {
            "Content-Type": "application/json",
          },
        });
        state.restaurants = response.data.data;
      } catch (error) {
        console.error("请求失败:", error);
      }
    };
    const handleRefresh = async () => {
      state.loading = true;
      if (state.search == false) {
        try {
          const response = await request({
            method: "post",
            url: "/product/alloy/models/page",
            data: {
              pageSize: state.pageSize,
              pageNum: state.pageNum,
            },
            headers: {
              "Content-Type": "application/json",
            },
          });
          state.tableData = response.data.data.list;
          for (let i = 0; i < state.tableData.length; i++) {
            state.tableData[i].updatedAt = state.tableData[i].updatedAt
              .split("T")
              .join(" ");
            state.tableData[i].createdAt = state.tableData[i].createdAt
              .split("T")
              .join(" ");
          }
          state.total = response.data.data.total;
          getR();
          state.loading = false;
        } catch (error) {
          console.error("请求失败:", error);
        }
      } else handleSearch();
    };
    const handleReturn = () => {
      state.search = false;
      handleRefresh();
    };
    const handleDel = async () => {
      const ids = [];
      for (let i = 0; i < state.selectedRows.length; i++) {
        ids.push(state.selectedRows[i].id); // 直接修改正在遍历的数组
      }
      if (
        state.selectedRows.length == state.tableData.length &&
        state.pageNum > 1
      )
        state.pageNum--;
      try {
        const response = await request({
          method: "delete",
          url: "/product/alloy/models",
          data: {
            ids: ids,
            operatorId: state.operatorId,
          },
          headers: {
            "Content-Type": "application/json",
          },
        });
        if (response.data.success) {
          ElMessage({
            showClose: true,
            message: "删除成功",
            type: "success",
          });
          handleRefresh();
        } else {
          ElMessage({
            showClose: true,
            message: response.data.errorMsg,
            type: "error",
          });
        }
      } catch (error) {
        console.error("请求失败:", error);
      }
    };
    const handleDelete = async () => {
      if (state.selectedRows.length == 0) {
        ElMessage({
          showClose: true,
          message: "您还未选择您要删除的记录",
          type: "warning",
        });
      } else {
        ElMessageBox.confirm("选择的记录将被删除,要继续吗?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            handleDel();
          })
          .catch(() => {
            ElMessage({
              type: "info",
              message: "删除取消",
            });
          });
      }
    };
    const handleSelectionChange = (selected) => {
      state.selectedRows = selected; // 更新选中的行
    };
    const handleConcrete = (row) => {
      //弃用
      state.raw = row.rawMaterials;
      state.dialogFormVisible2 = true;
    };
    const handleConcrete1 = (row) => {
      if (row.description === "") state.des = "无";
      else state.des = row.description;
      state.dialogFormVisible3 = true;
    };
    const handleEdit = (row) => {
      state.edit = row;
      state.edit1.id = row.id;
      state.edit1.productName = row.productName;
      state.edit1.modelName = row.modelName;
      state.edit1.internalModel = row.internalModel;
      state.edit1.description = row.description;
      state.edit1.rawMaterials = {};
      state.input.balance = 0.0;
      for (const key in row.rawMaterials) {
        state.edit1.rawMaterials[key] = row.rawMaterials[key];
      }
      state.edit1.specifications = {};
      for (const key in row.specifications) {
        state.edit1.specifications[key] = row.specifications[key];
      }
      state.dialogFormVisible1 = true;
    };
    const push = () => {
      if (state.input.name === "") {
        ElMessage({
          message: "请填写您要添加的原材料名",
          type: "warning",
        });
      } else if (
        state.input.ratio === "" ||
        isNaN(+state.input.ratio) ||
        Number(state.input.ratio) == 0 ||
        Number(state.input.ratio) > 1
      ) {
        ElMessage({
          message: "原材料要有一定且合法的占比(占比不等于0小于1)",
          type: "warning",
        });
      } else if (
        Number(state.input.ratio) > state.input.balance &&
        !(state.input.name in state.form.rawMaterials)
      ) {
        ElMessage({
          message: "已无法添加这么多比例的原材料",
          type: "warning",
        });
      } else {
        if (state.input.name in state.form.rawMaterials)
          state.input.balance = new Decimal(state.input.balance)
            .plus(new Decimal(state.form.rawMaterials[state.input.name]))
            .toNumber();
        if (state.input.balance >= Number(state.input.ratio)) {
          state.form.rawMaterials[state.input.name] = Number(state.input.ratio);
          state.input.balance = new Decimal(state.input.balance)
            .minus(new Decimal(Number(state.input.ratio)))
            .toNumber();
        } else {
          state.input.balance = new Decimal(state.input.balance)
            .minus(new Decimal(state.form.rawMaterials[state.input.name]))
            .toNumber();
          ElMessage({
            message: "已无法添加这么多比例的原材料",
            type: "warning",
          });
        }
        state.input.name = "";
        state.input.ratio = state.input.balance.toString();
      }
    };
    const pop = (name) => {
      ElMessageBox.confirm("是否要删除该元素?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          state.input.balance = new Decimal(state.input.balance)
            .plus(new Decimal(state.form.rawMaterials[name]))
            .toNumber();
          state.input.ratio = state.input.balance.toString();
          delete state.form.rawMaterials[name];
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "删除取消",
          });
        });
    };
    const push1 = () => {
      if (Object.keys(state.edit1.rawMaterials).length === 0)
        state.input.balance = 1.0;
      if (state.input.name === "") {
        ElMessage({
          message: "请填写您要添加的原材料名",
          type: "warning",
        });
      } else if (
        state.input.ratio === "" ||
        isNaN(+state.input.ratio) ||
        Number(state.input.ratio) == 0 ||
        Number(state.input.ratio) > 1
      ) {
        ElMessage({
          message: "原材料要有一定且合法的占比(占比不等于0且小于1)",
          type: "warning",
        });
      } else if (
        Number(state.input.ratio) > state.input.balance &&
        !(state.input.name in state.edit1.rawMaterials)
      ) {
        ElMessage({
          message: "已无法添加这么多比例的原材料",
          type: "warning",
        });
      } else {
        if (state.input.name in state.edit1.rawMaterials)
          state.input.balance = new Decimal(state.input.balance)
            .plus(new Decimal(state.edit1.rawMaterials[state.input.name]))
            .toNumber();
        if (state.input.balance >= Number(state.input.ratio)) {
          state.input.balance = new Decimal(state.input.balance)
            .minus(new Decimal(Number(state.input.ratio)))
            .toNumber();
          state.edit1.rawMaterials[state.input.name] = Number(
            state.input.ratio
          );
        } else {
          state.input.balance = new Decimal(state.input.balance)
            .minus(new Decimal(state.edit1.rawMaterials[state.input.name]))
            .toNumber();
          ElMessage({
            message: "已无法添加这么多比例的原材料",
            type: "warning",
          });
        }
        state.input.name = "";
        state.input.ratio = state.input.balance.toString();
      }
    };
    const pop1 = (name) => {
      ElMessageBox.confirm("是否要删除该元素?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          state.input.balance = new Decimal(state.input.balance)
            .plus(new Decimal(state.edit1.rawMaterials[name]))
            .toNumber();
          state.input.ratio = state.input.balance.toString();
          delete state.edit1.rawMaterials[name];
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "删除取消",
          });
        });
    };
    const push2 = () => {
      if (state.input1.name === "") {
        ElMessage({
          message: "请填写您要添加的规格类型",
          type: "warning",
        });
      } else if (state.input1.ratio === "") {
        ElMessage({
          message: "规格类型要有对应的尺寸或者型号",
          type: "warning",
        });
      } else {
        state.form.specifications[state.input1.name] = state.input1.ratio;
        state.input1.name = "";
        state.input1.ratio = "";
      }
    };
    const pop2 = (name) => {
      delete state.form.specifications[name];
    };
    const push3 = () => {
      if (state.input1.name === "") {
        ElMessage({
          message: "请填写您要添加的规格类型",
          type: "warning",
        });
      } else if (state.input1.ratio === "") {
        ElMessage({
          message: "规格类型要有对应的尺寸或者型号",
          type: "warning",
        });
      } else {
        state.edit1.specifications[state.input1.name] = state.input1.ratio;
        state.input1.name = "";
        state.input1.ratio = "";
      }
    };
    const pop3 = (name) => {
      delete state.edit1.specifications[name];
    };
    const handleCurrentChange = () => {
      handleRefresh();
    };
    const valid = (obj) => {
      //
      if (obj.modelName === "") {
        ElMessage({
          message: "合金牌号不能为空",
          type: "warning",
        });
      } else if (Object.keys(obj.rawMaterials).length === 0) {
        ElMessage({
          message: "原材料列表不能为空",
          type: "warning",
        });
      }
    };
    onBeforeMount(() => {});
    onMounted(() => {
      state.operatorName=useRoute().params.userName;
      console.log(state.operatorName);
      handleRefresh();
    });
    return {
      ...toRefs(state),
      reset,
      reset1,
      reset2,
      submitA,
      submitB,
      handleAdd,
      handleDelete,
      handleReturn,
      handleRefresh,
      handleSelectionChange,
      handleConcrete,
      handleConcrete1,
      handleEdit,
      handleSearch,
      handleSelect,
      handleCurrentChange,
      querySearch,
      createFilter,
      push,
      push1,
      push2,
      push3,
      pop,
      pop1,
      pop2,
      pop3,
    };
  },
});
</script>

<style  scoped>
.layout {
  width: 100%;
  height: 100%;
  background-color: #f5f6f9;
  padding-top: 20px;
}
.main-box {
  width: 98%;
  min-height: 800px;
  height: auto;
  background-color: #ffffff;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.tit {
  height: 40px;
  line-height: 40px;
  font-weight: 600;
  font-size: 20px;
  text-indent: 1em;
}
.searcher-box {
  margin-top: 20px;
  height: 100px;
  width: 96%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.inp {
  height: 50px;
  width: 30%;
  display: flex;
  overflow: hidden;
  line-height: 30px;
}
.inpH {
  width: 22%;
  margin-left: 5px;
  margin-right: 5px;
  text-align: center;
}
.btn-list {
  border: 1px solid #e1e3e5;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  margin: 0 20px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
.table-box {
  flex: 1;
  margin: 0 20px;
  border: none;
}
.pagination-box {
  margin: 10px 20px;
  display: flex;
  justify-content: flex-end;
}
.el-table {
  --el-table-header-bg-color: var(--el-bg-color-page);
  --el-table-border-color: var(--el-border-color-dark);
  --el-table-header-text-color: var(--el-text-color-primary);
}
.form-box {
  position: relative;
  min-height: 300px;
  height: auto;
  overflow: hidden;
}
.col {
  height: 32px;
  display: flex;
  background-color: white;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ys {
  width: 400px;
  display: flex;
  justify-content: space-around;
}
.wz {
  width: 25%;
  line-height: 32px;
  font-weight: 600;
}
.sr {
  display: flex;
  width: 70%;
  height: 32px;
  justify-content: space-around;
}
.lis {
  height: 32px;
  margin-bottom: 5px;
  font-size: 20px;
  color: white;
  text-indent: 1em;
  background-color: rgba(0, 0, 0, 0.596);
  border-radius: 3px;
}
.zwz {
  text-indent: 1em;
  height: 32px;
  line-height: 32px;
  width: 10%;
}
.ylm {
  width: 40%;
}
.ad {
  color: white;
  background-color: rgb(0, 174, 255);
  height: 32px;
  line-height: 32px;
  text-align: center;
  width: 10%;
  border-radius: 5px;
  font-size: 18px;
}
.ad:hover {
  background-color: rgb(0, 174, 255, 0.6);
  cursor: pointer;
}
.ad:active {
  background-color: rgba(0, 174, 255, 0.8);
}
.ylb {
  margin-left: 115px;
  width: 270px;
  display: flex;
  flex-wrap: wrap;
  height: auto;
  min-height: 60px;
  border: 1px solid grey;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}
.ylb1 {
  position: relative;
  width: 75.74px;
  background-color: rgba(0, 0, 0, 0.644);
  color: white;
  height: 20px;
  margin: 2px;
  border-radius: 2px;
  line-height: 20px;
}
.ylb2 {
  width: 30%;
}
.pop {
  position: absolute;
  text-align: center;
  line-height: 20px;
  color: white;
  height: 20px;
  width: 20px;
  top: 0;
  right: 0;
  background-color: rgba(255, 0, 0, 0.737);
}
.col1 {
  height: 100px;
}
.ys1 {
  height: 100px;
}
.wz1 {
  height: 32px;
}
.sr1 {
  height: 100px;
}
.el-textarea__inner {
  height: 100px;
}
.load {
  position: absolute;
  top: 450px;
  left: 800px;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  color: white;
  background-color: rgba(0, 0, 0, 0.68);
  line-height: 40px;
  text-align: center;
  z-index: 9999;
}
.el-icon.is-loading {
  animation: rotating 2s linear infinite;
}
@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ret {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100px;
  margin-right: 6px;
}
</style>
    